<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div进行布局</title>
		<style type="text/css">
			/**浏览器兼容处理：不同浏览器对margin和padding解析不同**/
			
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#container {
				background-color: #AF9540;
				height: 600px;
			}
			
			#header {
				height: 30px;
				background-color: #625F50;
			}
			
			#content {
				height: 540px;
				background-color: #205F30;
			}
			
			#footer {
				height: 30px;
				background-color: #497F30;
			}
			
			/*决定定位*/
			#div-absolute{
				height: 20px;
				width: 20px;
				background-color: red;
				/*position属性需要搭配left、top、right、bottom进行使用，表示定位的位移关系**/
				position: absolute;
				right:0%;
				top: 0%;
			}
			
			#hand{
				height: 60px;
				width: 70px;
				background-color: white;
				/*相对定位**/
				position: relative;
				left: 300px;
				top: 300px;
			}
			#hand2{
				height: 60px;
				width: 70px;
				background-color: blue;
			}
		</style>
	</head>

	<body>
		<!--表示划分了整个body区域-->
		<div id="container">
			<div id="header"></div>
			<div id="content">
				<div id="hand">					
				</div>
				<div id="hand2"></div>
			</div>
			<div id="footer"></div>
			<div id="div-absolute"></div>
		</div>
	</body>

</html>